<template>
  <a-card :bordered="false">
    <div>
      <a-row>
        <a-col :span="12">
          <span style="font-size: 16px;font-weight: bolder">部门名称:</span>
          <a-input placeholder="请输入部门名称"  style="width: 200px;margin-right: 20px;margin-left: 20px" allowClear/>
          <a-button type="primary" icon="search">
            搜索
          </a-button>
        </a-col>
      </a-row>
      <br/>
      <a-row>
        <a-col :span="8">
          <a-button type="primary" style="background-color: green" @click="openAdd">
            <a-icon type="plus-circle" />
            新增
          </a-button>
        </a-col>
      </a-row>
      <br/>
      <a-row>
        <a-col :span="20">
          <a-table :data-source="data" bordered :pagination="false" rowKey="deptId">
            <a-table-column title="序号"  width="80px" align="center">
              <template slot-scope="text, record,index">
                <span>{{index+1}}</span>
              </template>
            </a-table-column>
            <a-table-column title="部门名称" data-index="deptName" width="200px" align="center">
            </a-table-column>
            <a-table-column title="部门状态"  width="100px" align="center">
              <template slot-scope="text, record,index">
                <span v-if="record.deptState == 0" style="color: green">可用</span>
                <span v-else style="color: red">冻结</span>
              </template>
            </a-table-column>
            <a-table-column title="部门说明" data-index="deptRemark" width="300px" align="center">
            </a-table-column>
            <a-table-column title="操作" align="center" width="260px">
              <template slot-scope="text,record,index">
                <a-button type="primary" icon="search"  style="margin-right: 20px">编辑</a-button>
                <a-button type="danger"   ghost>删除</a-button>
              </template>
            </a-table-column>
          </a-table>


        </a-col>
      </a-row>
      <br/>
      <a-row>
        <a-col :span="20" align="center">
          <!--
       current:当前选中页码
       pageSize:分页大小
       total：数据总条数，底层会根据总条数和分页大小，自动生成分页项
       hideOnSinglePage：只有一页时是否显示分页条控件，有该属性表示true，也就是单页时不显示分页条组件
       -->
          <a-pagination :current="current" :pageSize="pageSize" :total="total" hideOnSinglePage show-less-items/>
        </a-col>
      </a-row>

      <a-modal v-model="isShowAdd" title="新增部门" @ok="addDept" @cancel="cancelAdd">
        <!--编写对话框显示内容：常用表单组件用于新增和编辑回显-->
        <!--
        :model="dept"  指定当前表单绑定的数据对象
        :label-col="labelCol" 指定表单项提示文本所占栅格布局大小
        :wrapper-col="wrapperCol" 指定表单项控件所占栅格布局大小
        -->
        <a-form-model :model="dept" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules" ref="confirm">
          <a-form-model-item label="部门名称" prop="deptName">
            <a-input v-model="dept.deptName" placeholder="请输入部门名称"/>
          </a-form-model-item>
          <a-form-model-item label="部门状态">
            <a-radio-group v-model="dept.deptState">
              <!--单选按钮默认匹配数值选中问题，在value属性前添加:-->
              <a-radio :value="0">可用</a-radio>
              <a-radio :value="1">不可用</a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="部门说明" prop="deptRemark">
            <a-input v-model="dept.deptRemark" type="textarea" />
          </a-form-model-item>
        </a-form-model>
      </a-modal>

    </div>
  </a-card>
</template>

<script>
export default {
  data () {
    let validateDeptName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('部门名称不能为空'));//校验失败
      } else {
        callback();//校验通过
      }
    };
    return {
      data: [
        {
          deptId: 1,
          deptName: '市场部',
          deptState: 0,
          deptRemark: 'xxxx'
        },
        {
          deptId: 2,
          deptName: '业务部',
          deptState: 1,
          deptRemark: 'xxxx'
        }
      ],
      current: 1,//当前加载页码
      pageSize: 5,//分页大小
      total: 40, //数据总条数
      isShowAdd: false,  //控制新增对话框显示隐藏属性
      labelCol: {span: 6},
      wrapperCol: {span: 14},
      dept: {
        deptName: '',
        deptState: 0,//如果想要表格中默认选中值为0的项，注意在属性前使用冒号
        deptRemark: ''
      },
      rules: {
        //在表单项上使用prop="deptName"关联当前校验规则
        deptName: [
          {validator: validateDeptName, trigger: 'blur'}
        ],
        /*  常用校验属性名：
           	required	是否不能为空
           	message	校验失败显示文本
           	trigger   校验触发的事件（可选值：'blur' | 'change' ）
          */
        deptRemark: [
          { required: true, message: '部门介绍不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    openAdd(){
      this.isShowAdd = true;
    },
    addDept(){
      this.$refs.confirm.validate(valid => {
        if (valid) {//校验通过
          console.log(this.dept)
        } else {//校验失败
          return false;//阻止继续操作
        }
      });


    },
    cancelAdd(){
      this.isShowAdd = false;
    }


  },
  created() {

  }
}
</script>